<template>
  <div>
    <div class="container">
      <!-- 五张轮播图 -->
      <img
        mode="aspectFill"
        v-for = "(item, index) in imgList"
        :key = "index"
        :src = "item.url"
        alt="加载失败"
        v-show = "index === active"
        class="img_css"
      />
      <!-- 左箭头 -->
      <div class="left_arrow" @click = "backone" @mouseleave = "loop"></div>
      <!-- 右箭头 -->
      <div class="right_arrow" @click = "nextone" @mouseleave = "loop"></div>
      <!-- 标记点 -->
      <div class="order" @mouseleave = "loop">
        <div
          v-for = " (i, key) in 5"
          :key = "key"
          :id = "key"
          class = "dots"
          :class = "key == active ? 'active': ''"
          @click = "position(key)"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      timer: null // eslint-disable-line no-unused-vars
    }
  },
  props: {
    imgList: Array
  },
  mounted () {
    console.log(this.imgList)
    // 创建定时器循环播放下一张
    this.loop()
  },
  methods: {
    // 点击下一张
    nextone () {
      // 清除定时器
      clearInterval(this.timer)
      console.log('当前这张是', this.active)
      if (this.active < 4) { // 0, 1, 2, 3 进来
        this.active++ // 变成 1, 2, 3 , 4
      } else { // 4 进来
        this.active = 0
      }
      console.log('下一张是', this.active)
    },
    // 点击上一张
    backone () {
      // 清除定时器
      clearInterval(this.timer)
      console.log('当前这张是', this.active)
      if (this.active === 0) { // 0进来
        this.active = 4 // 上一张是4
      } else { // 1, 2, 3, 4进来
        this.active-- // 变成0, 1, 2, 3
      }
      console.log('上一张是', this.active)
    },
    // 小圆点定位
    position (key) {
      // 清除定时器
      clearInterval(this.timer)
      console.log('小圆点要去', key, '当前这张是', this.active)
      if (this.active !== key) {
        this.active = key
      }
    },
    // 循环播放
    loop () {
      // 清除定时器
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        console.log('当前这张是', this.active)
        if (this.active < 4) { // 0, 1, 2, 3 进来
          this.active++ // 变成 1, 2, 3 , 4
        } else { // 4 进来
          this.active = 0
        }
        console.log('下一张是', this.active)
      }, 3000)
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.container {
  /* background: pink; */
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: 400px;
  width: 1000px;
}

.img_css {
  height: 400px;
  width: 1000px;
}

.left_arrow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 41px;
  height: 69px;
  transform: translateY(-50%);
  background-image: url('../assets/arrow.png');
  background-position: 81px 0;
}

.left_arrow:hover {
  background-position: 165px 0;
}

.right_arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 41px;
  height: 69px;
  transform: translateY(-50%);
  background-image: url('../assets/arrow.png');
  background-position: 41px 0;
}

.right_arrow:hover {
  background-position: 123px 0;
}

.order {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.dots {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 1px solid #dfdddd;
  margin-right: 4px;
}

.active {
  background: coral;
}
</style>
